<template>
  <div class="product">
    <h3>标题：{{ title }}</h3>
    <p>价格: {{ price }}</p>
    <p>描述: {{ desc }} <button @click="cut">是兄弟就来砍我</button></p>
  </div>
</template>

<script>
export default {
    name: 'MyGoods',

    // props：写需要父组件传值的地方
    // 一般情况下，props不会写数组形式
    // 因为写数组形式，父组件可以传可以不传
    // props: ['title', 'price', 'desc']

    // 我能不能限制要父组件必传？能，那要写成对象形式
    props: {
      // 要父传递一个title
      title: {
        // 开启必传模式
        required: true
      },

      price: {
        required: true
      },

      desc: {
        // 如果没传就用默认值
        default: '美食'
      }
    },

    methods: {
      cut () {
        // price是父组件传递过来的数据
        // 子组件里不允许修改
        // this.price -= 0.1
      }
    }
};
</script>

<style scoped>
.product {
  width: 400px;
  border: 3px solid #000;
  border-radius: 5px;
  margin: 10px;
  padding: 0 20px;
}
</style>